<template>
  <div class="tyfp-content">
    <div class="tyfp-content-btn">
      <div class="tyfp-content-btn-item" v-for="(item, index) in btnitem" :key="index" @click="btnitemsub(item)">
        <img class="tyfp-content-btn-item-img" :src="getAssetsFile('tyfp', item.url)" />
        <div class="tyfp-content-btn-item-text">{{ item.name }}</div>
      </div>
    </div>
    <div class="tyfp-content-tips">
      <div class="tyfp-content-tips-text">
        救治伤员启动
      </div>
    </div>
  </div>
  
  <Eldioa :headtext="Eldioaform.headtext" :dialogVisible="editdialogVisible" @eddialogVisible="updateDialogVisible"
    :elwidth="Eldioaform.elwidth" :elheight="Eldioaform.elheight">
    <template #dialogbody>
      <div class="Eldioacont">
        <div v-for="item in 20" :key="item">{{ item }}</div>

      </div>

      <div class="dialog-footer" style="text-align: right;">
        <el-button type="primary" style="background: rgba(4, 134, 254, 1);" @click="elhandleSubmit">
          确认
        </el-button>
        <el-button style="background: transparent;border:1px solid rgba(89, 175, 249, 0.70);color:rgba(1, 194, 255, 1)"
          @click="handleCancel">
          取消
        </el-button>
      </div>
    </template>
  </Eldioa>

</template>

<script setup>
import { ref, onMounted, provide, computed } from 'vue'
import { getAssetsFile } from "@/utils/compnt.js";



import Eldioa from '@/components/eldioa/index.vue'



const btnitem = ref([
  {
    url: 'luxiangh',
    name: '评分按钮'
  },
  {
    url: 'luxiangh',
    name: '生成报告'
  },
  {
    url: 'luxiangh',
    name: '流程优化建议'
  }
])

const btnitemsub = (item) => {
  switch (item.name) {
    case '流程优化建议':
      editdialogVisible.value = true
      Eldioaform.value.headtext = '流程优化建议（XX事件名称）'
      Eldioaform.value.formtype = '流程优化建议'
      Eldioaform.value.elheight = 520
      break;
  }
}



const Eldioaform = ref({
  headtext: '流程优化建议',
  elwidth: 746,
  elheight: 520,
  formtype: '流程优化建议'
})




const editdialogVisible = ref(false)

const updateDialogVisible = (newValue) => {
  editdialogVisible.value = newValue
}

// 确认表单
const elhandleSubmit = async () => {


}


// 关闭
const handleCancel = () => {

  editdialogVisible.value = false
}












onMounted(() => { })

</script>

<style lang="less" scoped>
.tyfp-content {
  position: absolute;
  width: 984px;
  height: 75px;
  color: #fff;
  left: 485px;
  z-index: 3;
  text-align: center;
  line-height: 75px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .tyfp-content-btn {
    width: 400px;
    margin-top: 16px;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .tyfp-content-btn-item {
      display: flex;
      align-items: center;
      background: rgba(47, 109, 255, 0.2);
      border-radius: 4px;
      border: 1px solid #2F6DFF;
      padding: 8px 10px;
      cursor: pointer;

      .tyfp-content-btn-item-img {
        width: 18px;
        height: 18px;
      }

      .tyfp-content-btn-item-text {

        height: 24px;
        font-family: PingFangSC, PingFang SC;
        margin-left: 6px;
        font-size: 16px;
        color: #FFFFFF;
        line-height: 24px;

      }

    }

    .tyfp-content-btn-item:hover {
      opacity: 0.5;
    }

  }

  .tyfp-content-tips {
    width: 465px;
    height: 46px;
    background: linear-gradient(270deg, rgba(255, 28, 28, 0) 0%, rgba(255, 35, 35, 0.44) 50%, rgba(46, 72, 255, 0) 100%);

    .tyfp-content-tips-text {
      line-height: 46px;
      font-size: 18px;
      color: #FFFFFF;
      text-shadow:
        -1px -1px 0 #ff0000,
        1px -1px 0 #ff0000,
        -1px 1px 0 #ff0000,
        1px 1px 0 #ff0000;
    }
  }
}

.Eldioacont {
  height: 450px;
  overflow-x: hidden;
  margin-bottom: 20px;
  scrollbar-width: none;
  padding-left: 50px;
  padding-top: 20px;
}
</style>